<template>
  <div>
    <!--文章内容-->
    <div class="content"  style="padding-top:80px;">
      <!---->
      <div class="article_nav">
        <div class="nav_body">
          <div style="display:flex;">
            <!--头像框-->
            <div style="display: inline-block; ">
              <div style="width: 40px;height: 40px;">
                <img class="portrait" :src="userinfo.img" />
              </div>
            </div>
            <!--作者，发表日期-->
            <div class="nav_author pointer">
              <div class="name">{{userinfo.name}}</div>
              <div class="date">{{communitydata.createTime}}</div>
            </div>
          </div>

          <div style="display: flex;flex-direction: row;">
            <!--点赞-->
            <div class="like" @click="like()" :class="{'like_active':like_flag === true}" style="display:flex;align-items:center;justify-content: center;">
              <i class="iconfont icon-dianzan2"></i>
            </div>
            <!-- <div>{{LikeList.vote}}个人赞过</div> -->
            <!--关注-->
            <!-- <div>
              <div class="focusbtn" v-if="!focus_flag">
                <div class="btn1" @click="focus()">关注</div>
              </div>

              <div class="unfocusbtn" v-if="focus_flag">
                <div
                  class="unbtn1"
                  @click="unfocus()"
                  @mouseenter="foucsspanmouseover"
                  @mouseleave="foucsspanmouseout"
                >
                  <span v-if="focusspan_flag">已关注</span>
                  <span v-if="!focusspan_flag">取消关注</span>
                </div>
              </div>
            </div> -->
            <!-- fanhui -->
            <div>
              <div class="focusbtn" style="margin-left:20px;">
                <div style="background-color: #3c7eee;color: #ffffff;cursor: pointer;padding: 6px 24px;border-radius: 4px;" @click="back()">返回</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--文章内容-->
      <div class="article_content">
        <!--文章标题-->
        <div class="community_title pointer">
          <span>{{communitydata.articleName}}</span>
        </div>
        <!--文章内容-->
        <div style="max-width:800px;" v-html="communitydata.content"></div>
      </div>

      <!--评论区-->
      <div class="community_replylist">
        <div class="reply_list">
          <div class="replylist_header">
            <div class="replylist_title pointer">讨论区</div>
            <div class="replylist_add">
              <div class="replylist_button pointer">
                <i class="iconfont icon-bianjiqianbixieshuru"></i>
                <span>添加新回复</span>
              </div>
            </div>
          </div>
          <!-- 评论区为空 -->
          <div>
            <!-- <div>评论区空空如也，留下你的第一条评论吧</div> -->
          </div>
          <!-- 评论区不为空 -->
          <div class="replylist_body">
            <div v-for="(item,index) in comment" :key="index">
            <!--评论用户-->
            <div class="replylist_item">
              <div class="item_userinfo">
                <!--头像-->
                <div>
                  <div class="item_userhead">
                    <img :src="item.img" />
                  </div>
                </div>
                <!--用户名-->
                <div class="item_username">
                  <div class="pointer">
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </div>
            </div>
            <!--评论内容-->
            <div class="replylist_content">
              <div class="item_content">
                <div v-html="item.content"></div>
              </div>
            </div>
            <!--评论时间-->
            <div class="replylist_info">
              <span class="replylist_date pointer">{{item.create_time}}</span>
              <!-- <span style="padding-left: 30px;" @click="reply()">
                <span class="glyphicon glyphicon-comment pointer"></span>
                <span class="pointer">回复</span>
              </span> -->
              <div @click="commentlike(item.id)"  style="display:flex;align-items:center;justify-content: center;">
                <i class="iconfont icon-dianzan2"></i>
              </div>
            </div>
            </div>

            <!--回复编辑框-->
            <div class="replylist_sub" v-if="reply_flag">
              <div class="replylist_editor">
                <div class="replyeditor_header pointer">
                  <i class="iconfont icon-bianjiqianbixieshuru"></i>
                  <span>添加新回复</span>
                </div>
                <div class="replyeditor_body">
                  <textarea placeholder="添加评论"></textarea>
                </div>
                <div class="replyeditor_footer">
                  <input class="editbtn" type="button" value="取消" @click="replyquxiao()" />
                  <input class="editbtn surebtn" type="button" value="确定" @click="replybtnclick()" />
                </div>
              </div>
            </div>

            <!--回复框-->
            <div  style="height: 450px;margin-top: 50px;">
              <div  id="editor"></div>
              <!-- <textarea v-model="commentContent"></textarea> -->
              <!-- <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入评论内容"
                v-model="commentContent">
              </el-input> -->
              <div class="replyeditor_footer">
                <input class="editbtn" type="button" value="取消" />
                <input class="editbtn surebtn" type="button" @click="addcomment()" value="确定" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.iconfont{
    font-size: 25px;
}
.content {
  width: 100%;
}
.article_nav {
  width: 100%;
  height: 60px;
  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1;
  background-color: #ffffff;
  padding: 10px calc(50% - 397.5px);
}
.nav_body {
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  vertical-align: baseline;
}

.nav_author {
  display: inline-block;
  margin-left: 30px;
}

.name {
  font-size: 13px;
  height: 20px;
  line-height: 24px;
  margin-right: 10px;
  cursor: pointer;
  margin-bottom: 5px;
}
.date {
  font-size: 12px;
  color: #9da1a8;
  height: 24px;
  line-height: 24px;
  margin-bottom: 5px;
}
.btn1 {
  border: 1px solid #3c7eee;
  border-radius: 4px;
  background-color: #fff;
  color: #3c7eee;
  cursor: pointer;
  padding: 6px 24px;
}
.focusbtn:hover .btn1 {
  background-color: #3c7eee;
  color: #ffffff;
}

.unbtn1 {
  border: 1px solid #e8ecf0;
  border-radius: 4px;
  background-color: #e8ecf0;
  color: #8997ab;
  cursor: pointer;
  padding: 6px 24px;
}
.unfocusbtn:hover .unbtn1 {
  border: 1px solid #d3d9dd;
  background-color: #d3d9dd;
  color: #666666;
}

.article_content {
  padding: 10px calc(50% - 397.5px);
}

.community_title {
  font-size: 32px;
  padding: 25px 0px;
  text-align: left;
  color: #333333;
  clear: both;
  width: 100%;
  font-weight: 900;
}

.like {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
  margin: 0px 20px;
}
.glyphicon-thumbs-up {
  padding: 12px 12px;
  width: 20px;
  height: 20px;
}
.like_active {
  background-color: #3c7eee;
  border: 1px solid #3c7eee;
  color: #fff;
}
.commentlike_active{
  color: #3c7eee;
}

/*评论区*/
.community_replylist {
  margin: 0px calc(50% - 397.5px);
  padding-top: 37px;
  width: 795px;
}
.replylist_header {
  border-bottom: 1px solid #e8ecf0;
  height: 32px;
}
.replylist_title {
  font-size: 18px;
  color: #333333;
  float: left;
  padding-left: 6px;
  border-left: 4px solid #3c7eee;
  line-height: 14px;
  height: 14px;
  margin: 5px 0px;
}
.replylist_add {
  float: right;
}
.replylist_button {
  border: 0px;
  color: #3c7eee;
  font-size: 14px;
  line-height: 20px;
  height: 20px;
}

.replylist_item {
  padding: 18px 0px;
  /*border-bottom: 1px solid #E8ECF0;*/
}
.item_userinfo {
  height: 36px;
  clear: both;
}
.item_userhead {
  cursor: pointer;
  float: left;
  width: 36px;
  height: 36px;
  background-size: 100%;
  border-radius: 50%;
}
.item_username {
  font-size: 14px;
  color: #333333;
  padding-left: 12px;
  float: left;
  line-height: 36px;
}
.item_userhead img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.replylist_content {
  padding: 11px 0px 18px 48px;
  font-size: 14px;
  color: #333333;
}
.replylist_info {
  height: 24px;
  font-size: 13px;
  color: #9ea3a6;
  padding-bottom: 18px;
  padding-left: 48px;
  display:flex;
  justify-content:flex-end;
  border-bottom: 1px solid #e8ecf0;;
}
.replylist_sub {
  border-left: 2px solid #e8ecf0;
  padding-left: 22px;
  color: #9ea3a6;
  font-size: 14px;
}
.replylist_editor {
  width: 100%;
  padding-top: 22px;
  padding-bottom: 2px;
  display: inline-block;
}
.replyeditor_header {
  width: 100%;
  padding-bottom: 17px;
}
.replyeditor_body {
  width: 100%;
  height: 90px;
}
.replyeditor_body textarea {
  width: 100%;
  height: 100%;
  border: 1px solid #e8ecf0;
  padding: 10px;
  resize: none;
  font-size: 14px;
  outline: none !important;
  -webkit-appearance: none;
}
.replyeditor_footer {
  padding-top: 17px;
  float: right;
}
.editbtn {
  width: 120px;
  border-radius: 2px !important;
  padding: 0px 35px;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
}
.surebtn {
  border: 1px solid #3c7eee;
  background-color: #3c7eee;
  color: #ffffff;
}

.comment {
  width: 100%;
  height: 390px;
  padding-top: 50px;
}
</style>
<script>
import moment from "moment"
import E from "wangeditor";
export default {
  name: "editor",
  mounted() {
    this.communityid = localStorage.getItem('communityid')
    this.sessionToken=localStorage.getItem('SessionToken')
    this.commentuserid = localStorage.getItem('Userid')
    if(this.communityid !== ''){
      this.getarticledata()
      this.getComment()
      this.getLikeList()
    }
    this.editor = new E("#editor");
    // 本地图片上传：关闭外部图片引入
    this.editor.customConfig.showLinkImg = false;
    // /upload是上传图片的服务器端接口
    this.editor.customConfig.uploadImgServer = '/upload'
    // 限制一次最多上传 5 张图片
    this.editor.customConfig.uploadImgMaxLength = 2
    this.editor.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      'fontName',  // 字体
      // 'italic',  // 斜体
      // 'underline',  // 下划线
      // 'strikeThrough',  // 删除线
      // 'foreColor',  // 文字颜色
      // 'backColor',  // 背景颜色
      // 'link',  // 插入链接
      // 'list',  // 列表
      // 'justify',  // 对齐方式
      // 'quote',  // 引用
      'emoticon',  // 表情
      // 'image',  // 插入图片
      // 'table',  // 表格
      // 'video',  // 插入视频
      // 'code',  // 插入代码
      // 'undo',  // 撤销
      // 'redo'  // 重复
    ] 
    this.editor.create();
    // editor.txt.html('<p>请输入文章内容</p>')
  },
  data() {
    return {
      focus_flag: false,
      focusspan_flag: true,
      //点赞
      like_flag: false,
      //评论回复
      reply_flag: false,
      communitydata:'',
      // 评论内容
      commentContent:'',
      editor:'',
      communityid:'',
      comment:'',
      // 文章作者信息
      userinfo:'',
      // 登陆用户id
      commentuserid:'',
      sessionToken:'',
      LikeList:'',
      // commentlike_flag:false,
    }
  },
  methods: {
    focus() {
      this.focus_flag = true;
    },
    unfocus() {
      this.focus_flag = false;
    },
    foucsspanmouseover() {
      this.focusspan_flag = false;
    },
    foucsspanmouseout() {
      this.focusspan_flag = true;
    },
    getLikeList(){
      this.$http.get('vote/listVotesByUserId?sessionToken='+this.sessionToken+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.LikeList = resp.data.data
          for(var i=0;i<this.LikeList.length;i++){
            if(this.LikeList[i].id.toString() === this.communityid){
              console.log('点赞')
              this.like_flag = true
            }
          }
        } else {
          // this.$message(resp.data.msg)
          console.log(resp.data)
        }
      })
    },
    //点赞点击事件
    like() {
      if(this.sessionToken != null){
        this.like_flag = !this.like_flag;
        console.log(this.like_flag)
        let obj = {
          // userId:this.commentuserid,
          goodId:this.communityid,
          // createTime:'',
          // updateTime:''
        }
        this.$http.post('vote/likeArticle?sessionToken='+this.sessionToken+'',obj,{headers:{'Content-Type':'application/json'}}).then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.getLikeList()
          }else if(resp.data.status === 499){
                this.$message.error('当前用户没有该权限！')
              } else {
            console.log(resp.data)
          }
        })
      } else{
        this.$message.error('您还未登录！')
      }
    },
    commentlike(id){
      if(this.sessionToken != null){
        // this.commentlike_flag = !this.commentlike_flag
        let obj = {
          goodId:id
        }
        this.$http.post('vote/likeComment?sessionToken='+this.sessionToken+'',obj,{headers:{'Content-Type':'application/json'}}).then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.getLikeList()
            this.$message.success(resp.data.data)
          }else if(resp.data.status === 499){
                this.$message.error('当前用户没有该权限！')
              } else {
            console.log(resp.data)
          }
        })
      } else{
        this.$message.error('您还未登录！')
      }
    },
    getcommentLikeList(){

    },
    //回复点击事件
    reply() {
      this.reply_flag = true;
    },
    replyquxiao() {
      this.reply_flag = false;
    },
    //回复确认事件
    replybtnclick() {},
    getarticledata () {
      this.$http.get('article/getArticleById?id='+this.communityid+'').then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.communitydata = resp.data.data
            this.communitydata.createTime = moment(new Date(parseInt(this.communitydata.createTime))).format("YYYY-MM-DD hh:mm:ss")
            // 获取文章作者用户信息
            this.$http.get('getInformation?id='+this.communitydata.userId+'').then((resp) => {
              if (resp.data.status === 200) {
                // console.log(resp.data)
                this.userinfo = resp.data.data
                // if(this.userinfo.img === ''){
                //   this.imageUrl = './../../../static/image/默认头像.jpg'
                // } else {
                  this.imageUrl = this.userinfo.img
                // }
              }else if(resp.data.status === 499){
                this.$message.error('当前用户没有该权限！')
              } else {
                this.$message.error('获取用户信息失败')
              }
            })
          } else {
            this.$message.error(resp.data.msg)
          }
        })
    },
    back (){
      this.$router.go(-1);
    },
    // 添加评论
    addcomment () {
      this.commentContent = this.editor.txt.html()
      console.log(this.commentContent)
      console.log(this.sessionToken)
      if(this.commentContent != '' && this.sessionToken != null){
        let obj = {
          articleId: this.communityid,
          commentUserId:this.commentuserid,
          content:this.commentContent,
          vote:0,
          createTime:'',
          updateTime:''
        }
        console.log(obj)
        this.$http.post('comment/addComment?sessionToken='+this.sessionToken+'',obj,{headers:{'Content-Type':'application/json'}}).then((resp) => {
          if (resp.data.status === 200) {
            console.log(resp.data)
            this.getComment()
            this.commentContent = ''
            this.editor.txt.clear()
          }else if(resp.data.status === 499){
                this.$message.error('当前用户没有该权限！')
              } else {
            console.log(resp.data)
          }
        })
      }else{
        this.$message.error('评论失败')
      }
    },
    // 获取评论
    getComment () {
      this.$http.get('comment/listCommentsByArticleId?articleId='+this.communityid+'&pageNum=1&pageSize=999').then((resp) => {
        if (resp.data.status === 200) {
          if(resp.data.data !== null) {
            this.comment = resp.data.data[0].list
            console.log(resp)
            for(let i = 0;i<this.comment.length;i++){
              this.comment[i].create_time = moment(new Date(parseInt(this.comment[i].create_time))).format("YYYY-MM-DD hh:mm:ss")
              // if(comment[i].img == null){
              //   comment[i].img='./../../../static/image/默认头像.jpg'
              // }
            }
          }
        }else if(resp.data.status === 499){
                this.$message.error('当前用户没有该权限！')
              } else {
          console.log(resp.data)
          this.$message.error('获取用户评论失败')
        }
      })
    }
  }
};
</script>